用Vue JS实现Accordian效果

1 综述

用Bootstrap的CSS部分实现CSS效果，VueJS实现Accordian效果。利用Vue JS的v-show或v-if指令，显示或隐藏panel-body

2 过程

• 构建相应的Component

• 利用Bootstrap写相应的template

• 注册Component，完成相关的数据、属性、方法

2.1 构建相应的Component

<div id="app">
 <panel></panel>
</div>

2.2 利用Bootstrap写相应的template

<template id="accordian-template">
 <div class="panel panel-default" >
   <div class="panel-heading">
     <h4 class="panel-title"><a href="">{{body.title}}</a></h4>
   </div>
   <div class="panel-body">
     <p>{{body.content}}</p>
   </div>
 </div>
</template>

2.3 注册Component，完成相关的数据、属性、方法

1. 为了让数组变为对象，因此我们要给panel设置item属性，并赋值为数组panels，同时在注册compnent是也要声明属性。

   <panel :item="panels"></panel>
   
   Vue.component('panel',{
       template:'#accordian-template'，
       props:['item']
     })
   

2. 实例化Vue，给数组panels赋值，由于v-show指令需要数值变化，不能给相应的值一个全局数据，所以在每一个对象中应该设置show这个数据。

      new Vue({
           el:'#app',
           data:{
             panels:[
                {title:'Section 1',content:'This is section 1',show:false},
                {title:'Section 2',content:'This is section 2',show:false},
                {title:'Section 3',content:'This is section 3',show:false}
             ]
         }
      });
      

3. 循环panel,每个.panel-body显示与否由show取值决定，当show=true时就显示.panel-body，否则隐藏。点击.panel-title时改变show的值以此来影响.panel-body的现实与隐藏。

   
     <template id="accordian-template">
   <div class="panel panel-default" v-for="body in item">
     <div class="panel-heading" >
       <h4><a href="" @click.prevent="body.show = !body.show">{{body.title}}</a></h4>
     </div>
     <div class="panel-body" v-show="body.show" transition="toggle">
       <p>{{body.content}}</p>
     </div>
   </div>
     </template>
     

4. 给.panel-body设置动画效果，需要指明transition=x和设置x.enter,x.leave

      <div class="panel-body" v-show="body.show" transition="toggle">
      <p>{{body.content}}</p>
    </div>
    
    .toggle-enter,.toggle-leave{
            height:0;
            opacity:0;
            padding:0 15px;
       }
      .panel-body{
            transition:all 1s;
            overflow:hidden;
      }
      

3 总结

1. 将数组转换为对象并取值，需要给component显示声明属性

2. 每个地方的值需要由body.show获得

3. component的过度效果，需要定义transition名，并设置相应的-enter,-leave效果

4 用jQuery实现

• 法一：点击.panel-title时获取相应的[data-target],给id=[data-target]添加或移除.in。这是Bootstrap中的实现方法。其方法有三个class..collapse隐藏元素，.collapse.in显示元素，.collapsing隐藏和显示之间的过渡效果。

• 法二：直接给id=[data-target]的元素应用animate()函数，并设置height:toggle或直接使用slideToggle()函数。

• 法三：没有过渡效果。直接给id=[data-target]的元素应用toggle()函数